<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
    //    window.onload=function() {
    //     const oul=document.querySelector('.list')
    //      console.log(oul.nodeType)
    //    }

    // window.addEventListener('DOMContentLoaded',function(){
    //     const oul=document.querySelector('.list')
    //      console.log(oul.nodeType)
    // },false)
    </script>
</head>
<body>
    <h2>dom操作</h2>
    <button class="btn">追加1000条li</button>
    <button class="del">删除ul</button>
    <button class="changeTu">修改图</button>
    <ul class="list"></ul>
    <img class="pic" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</body>
<script>

   window.onload=function() {
    
    const btn=document.querySelector('.btn')
    const oul=document.querySelector('.list')
    const del=document.querySelector('.del')
    const changeTu=document.querySelector('.changeTu')

    //创建文档碎片
    const fragment=document.createDocumentFragment()
    
    btn.onclick=function() {

      for(let i=0;i<1000;i++) {
         //创建li
         let li=document.createElement('li')
         //添加文本
         li.textContent=`列表${i+1}`
         //追加到ul
        // oul.appendChild(li)
        fragment.appendChild(li)

       }

       oul.appendChild(fragment)
   
   }

   del.addEventListener('click',function() {
       const ul=document.body.removeChild(oul)
       console.log(ul)
       document.body.insertBefore(ul,document.querySelector('h2'))
   },false)

   changeTu.addEventListener('click',function() {
    const pic=document.querySelector('.pic')
    console.log(pic.src)
   // pic.src=''
   pic.setAttribute('src','https://img0.baidu.com/it/u=3259262307,2423493103&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=475')
   console.log(pic.getAttribute('src'))   
})
}

</script>
</html>